<template>
  <nav>
    <ul class="nav">
      <li @click="toggle(i)" class="item" :style="{flex: item.length}" :class="{ active: current === i }" v-for="(item, i) of $site.nav" :key="i">
        <img :src="require(`@/assets/img/${current === i?'a':''}${i+1}.png`)" :alt="i+1">
        <span>{{ item }}</span>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Nav',
  data () {
    return {
      current: 0,
      routes: ['key', 'quiz', 'learn', 'card', 'exam']
    }
  },
  methods: {
    toggle (i) {
      this.current = i
      this.$router.replace({ name: this.routes[i] })
    }
  }
}
</script>
